<template>
  <div class="project">
    <!-- 监测数据统计  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>监测数据统计</div>
      </div> 
      <div class="warp warp1">
      <el-form :inline="true" :model="queryFrom" class="demo-form-inline" label-width="10px">
        <el-form-item label="">
          <el-select v-model="queryFrom.region" size="small" placeholder="请选择项目">
            <el-option label="常德省厅普适型检测项目" value="shanghai"></el-option> 
            <el-option label="常德普适型地灾检测(1170)" value="beijing"></el-option>
          </el-select>
        </el-form-item> 
        <el-form-item label=" "> 
          <el-date-picker v-model="queryFrom.value1" size="small" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label=" "> 
          <el-radio-group v-model="queryFrom.radio"  size="small">
            <el-radio-button label="10分钟"></el-radio-button>
            <el-radio-button label="1小时"></el-radio-button>
            <el-radio-button label="2小时"></el-radio-button>
            <el-radio-button label="3小时"></el-radio-button>
            <el-radio-button label="6小时"></el-radio-button>
            <el-radio-button label="最近一天"></el-radio-button>
          </el-radio-group>
        </el-form-item> 
      </el-form>
    </div>
      <el-table v-loading="loading" :data="configList">    
        <el-table-column label="地区" align="center" prop="pointName" :show-overflow-tooltip="true" />
        <el-table-column label="监测点名称" align="center" prop="pointName" :show-overflow-tooltip="true" />
        <el-table-column label="设备SN" align="center" prop="deviceSn" :show-overflow-tooltip="true" />
        <el-table-column label="裂缝值/mm" width="120" align="center" prop="nowCrack" :show-overflow-tooltip="true" />
        <el-table-column label="裂缝变化量/mm" width="120" align="center" prop="crack" :show-overflow-tooltip="true" />
        <el-table-column label="统计开始时间" width="160" align="center" prop="startTime" :show-overflow-tooltip="true" />
        <el-table-column label="统计截止时间" width="160" align="center" prop="endTime" :show-overflow-tooltip="true" /> 
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
          <!-- <template slot-scope="scope"> -->
          <template> 
            <el-button size="mini" type="text">查看详情</el-button>   
          </template>
        </el-table-column>
      </el-table>   
      <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
    
    </div>
  </div>
</template>

<script>
export default {
data() {
  return { 
    queryFrom: {
      radio: "最近一天"
    },
    loading: false,
    configList: [ 
      { "crack": "-0.5747", "point": "鼎城区", "deviceSn": "001C21030595_L1_LF_1", "deviceId": 58663, "pointName": "鼎城区双桥坪镇祝家当村3组青山岭滑坡", "nowCrack": "-5.1596", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "-0.1460", "point": "鼎城区", "deviceSn": "001C21030593_L1_LF_1", "deviceId": 58698, "pointName": "鼎城区蔡家岗镇雷公庙社区2组镇泰中学滑坡", "nowCrack": "-1.7340", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "0.0705", "point": "鼎城区", "deviceSn": "001C21030594_L1_LF_1", "deviceId": 58705, "pointName": "鼎城区黄土店镇黄土坡村3组苦练冲滑坡", "nowCrack": "-12.7120", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "0.0040", "point": "鼎城区", "deviceSn": "001C21030572_L1_LF_1", "deviceId": 58709, "pointName": "鼎城区黄土店镇砂田溪村2组李跃宝屋后崩塌", "nowCrack": "0.0136", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "0.0042", "point": "鼎城区", "deviceSn": "001C21022550_L1_LF_1", "deviceId": 58735, "pointName": "鼎城区黄土店镇沧浪坪村5组马蹄冲滑坡", "nowCrack": "3.0877", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "0.5748", "point": "鼎城区", "deviceSn": "001C21030578_L1_LF_1", "deviceId": 58713, "pointName": "鼎城区黄土店镇黄土坡村2组丰玉前屋后崩塌", "nowCrack": "0.5921", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "0.6324", "point": "鼎城区", "deviceSn": "001C21030590_L1_LF_1", "deviceId": 58723, "pointName": "鼎城区黄土店镇竹清潭村2组胡小红屋后滑坡", "nowCrack": "2.4762", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "-6.6288", "point": "鼎城区", "deviceSn": "001C21030576_L1_LF_1", "deviceId": 58717, "pointName": "鼎城区花岩溪管理处高峰村6组莫必文屋后滑坡", "nowCrack": "-0.5492", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "-0.1762", "point": "鼎城区", "deviceSn": "001C21030591_L1_LF_1", "deviceId": 58727, "pointName": "鼎城区花岩溪国家森林公园管理委员会花岩溪村1组礼仁溪滑坡", "nowCrack": "-1.5693", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" },
      { "crack": "2.1552", "point": "鼎城区", "deviceSn": "001C21030592_L1_LF_1", "deviceId": 58731, "pointName": "鼎城区草坪镇三角堆村3组彭国清屋后滑坡", "nowCrack": "-0.1456", "startTime":"2023-12-01 00:00:00", "endTime": "2024-01-31 00:00:00" }
    ],
    total: 10,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },  
  }
},
methods:{
  getList(){}, 
}
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/tablePage.scss";   
</style>